<template>
	<div class="homepage">
		<section class="header">
			<index-header></index-header>
		</section>
		<section class="main-container">
			<el-row class="rowWrap">
				<el-col :span="4" class='rowLeft'>
					<!-- <menu-left></menu-left> -->
					<v-menu></v-menu>
				</el-col>
				<el-col :span="20" class="rowRight">
					<transition name="router-fade" mode="out-in">
						<router-view></router-view>
					</transition>
				</el-col>
			</el-row>
		</section>		
	</div>
</template>

<style lang='scss' rel='stylesheet/scss' scoped>
.homepage{
	height: 100%;
	display: flex;
	flex-direction:column;
}
	.router-fade-enter-active, .router-fade-leave-active {
      	transition: opacity .3s;
  	}
  	.router-fade-enter, .router-fade-leave-active {
      	opacity: 0;
 	}
	.main-container{
		flex:1;
		background: #F2F2F2;
		.rowWrap{
			height: 100%;
			background: #fff;
			.rowLeft{
				height: 100%;
			}
			.rowRight{
				height: 100%;
				background-color: #F5F6F6;
				box-shadow: inset 1px 0 4px 0 rgba(202,202,202,.5);
			}
		}
	}
</style>

<script>
	import indexHeader from '../components/header.vue'
	import menuLeft from '../components/menuLeft.vue'
	import menu from '../components/menu.vue'
	export default {
		components: {
			indexHeader,
			menuLeft,
			'v-menu':menu
		},
		data() {
			return {
				
			}
		},
		created() {
			
		},
		computed: {
			
		},
		mounted(){
			
		},
		methods: {
			
		}
	}
</script>